<div style="width: 100%;">

    <table style="width: 100%;" id="sea-tab">
        <tr style="width: 100%;height: 40px">
            <td style="text-align: right">名称：</td>
            <td><input name="name" id="menuName" style="width: 150px;height: 19px"></td>
            <td style="text-align: right">类型：</td>
            <td>
                <!--<input name="name" id="menuType" width="50" height="40">-->
                <select name="menuType" id="menuType" style="width: 150px;height: 24px;border-color: #777777;border-radius: 2px">
                    <option value="-1" selected="selected" disabled style="color: #888888">--请选择--</option>
                    <option value="0">菜单</option>
                    <option value="1">按钮</option>
                </select>
            </td>
            <td style="text-align: right">是否可见：</td>
            <td>
                <!--<input name="name" id="visible" width="50" height="40">-->
                <select name="visible" id="visible" style="width: 150px;height: 24px;border-color: #777777;border-radius: 2px">
                    <option value="-1" selected="selected" disabled style="color: #888888">--请选择--</option>
                    <option value="1">可见</option>
                    <option value="0">不可见</option>
                </select>
            </td>
            <td style="text-align: right">备注：</td>
            <td><input name="name" id="remark" style="width: 150px;height: 19px"></td>
            <td style="width: 80px; text-align:center"><button onclick="queryMenu()" style="width: 60px; cursor:pointer">查 询</button></td>
            <td style="width: 80px; text-align:center"><button onclick="clearInput()" style="width: 60px; cursor:pointer">重 置</button></td>
            <td style="text-align:center">|</td>
            <td style="width: 80px; text-align:center"><button onclick="fillMenuInfo()" style="width: 60px; cursor:pointer">新增</button></td>
            <td style="text-align:center">|</td>
            <td style="width: 80px; text-align:center"><button id="delMenus" style="width: 60px; cursor:pointer">批量删除</button></td>
        </tr>
    </table>

</div>

<hr class="layui-bg-gray" id="menuTree">
<hr class="layui-bg-gray" id="winLayId">

<table class="layui-hide" id="pagingInfo" lay-filter="pagingInfo" style="width: 100%"></table>
<script src="static/loadUI.js"></script>

<script type="text/html" id="menuBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    $(function () {
        menuInfo(null,null,null,null);

        // 加载菜单数据
        $.ajax({
            url: '/menu/queryMenuAndChild',
            type: 'POST',
            data:{'type':'0'},
            success: function (result) {
                if (result.errorCode == 0) {
                    // result.data
                    $('#menuTree').data('menuTree',result.data);
                }
            }
        });
    })

    function queryMenu() {
        var name = $('#menuName').val();
        var menuType = $('#menuType').val();
        var visible = $('#visible').val();
        var remark = $('#remark').val();
        menuInfo(name,menuType,visible,remark);
    }

    function clearInput() {
        $('#sea-tab input').val('');
        $('#menuType').val('-1');
        $('#visible').val('-1');
        // document.getElementById("remark").value="";
    }

    function fillMenuInfo() {
        layer.open({
            title:'添加菜单',
            type: 1,
            area: ['700px', '450px'],
            fixed: false, //不固定
            maxmin: true,
            btn: ['添加','取消'],
            content: getHtml('/sys/menu/edit.html'),
            yes: function(){
                layer.closeAll();
                // 执行确定逻辑
                addMenu();
            }
            ,btn2: function(){
                layer.closeAll();
            }
        });
    }

    function addMenu() {
        let parentId = $('#emPid1').val();
        let name = $('#emName1').val();
        let menuType = $('#emType1').val();
        if (menuType ==="" || undefined || null) { menuType = 0;}

        let pmMark = $('#emMark1').val();
        let visible = $('#emVisible1').val();
        if (visible ==="" || undefined || null) { visible = 1;}

        let icon = $('#emIcon1').val();
        let blank = $('#emBlank1').val();
        if (blank ==="" || undefined || null) { blank = 0;}

        let link = $('#emLink1').val();
        let orderNum = $('#emSort1').val();
        if (orderNum ==="" || undefined || null) {orderNum = 1;}

        let remark = $('#emRemark1').val();

        let url = 'menu/addRecord';
        let params = {'parentId':parentId,'name':name,'menuType':menuType,'pmMark':pmMark,'visible':visible,
            'icon':icon,'blank':blank,'url':link,'orderNum':orderNum,'remark':remark};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                //alert(result.desc);
                layer.msg(result.desc);
                loadMenuPaging();
        }})
    }

    function updateMenu() {
        let id = $('#emId1').val();
        let parentId = $('#emPid1').val();
        let name = $('#emName1').val();
        let menuType = $('#emType1').val();
        if (menuType ==="" || undefined || null) { menuType = 0;}

        let pmMark = $('#emMark1').val();
        let visible = $('#emVisible1').val();
        if (visible ==="" || undefined || null) { visible = 1;}

        let icon = $('#emIcon1').val();
        let blank = $('#emBlank1').val();
        if (blank ==="" || undefined || null) { blank = 0;}

        let link = $('#emLink1').val();
        let orderNum = $('#emSort1').val();
        if (orderNum ==="" || undefined || null) {orderNum = 1;}

        let remark = $('#emRemark1').val();

        let url = 'menu/updateOneById';
        let params = {'id':id,'parentId':parentId,'name':name,'menuType':menuType,'pmMark':pmMark,'visible':visible,
            'icon':icon,'blank':blank,'url':link,'orderNum':orderNum,'remark':remark};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                //alert(result.desc);
                layer.msg(result.desc);
                loadMenuPaging();
        }})
    }

    function deleteMenuByIds(ids) {
        if (confirm('确定删除吗?')){
            let url = 'menu/deleteByIds';
            $.ajax({  "type":"post",
                "url":url,
                "data":{'ids':ids},
                "success":function(result){
                    //alert(result.desc);
                    layer.msg(result.desc);
                    loadMenuPaging();
                }
            })
        }
    }

</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(pagingInfo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(pagingInfo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                deleteMenuByIds(data.id);

            } else if(obj.event === 'edit'){
                // 编辑操作  layer.alert('编辑行：<br>'+ JSON.stringify(data))
                $('#page-com').data('menuData',data);

                layer.open({
                    title:'修改菜单',
                    type: 1,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    btn: ['修改','取消'],
                    content: getHtml('/sys/menu/edit.html'),
                    yes: function(){
                        layer.closeAll();
                        // 执行确定逻辑
                        updateMenu();
                        loadMenuPaging();
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                });
            }

        });

        //批量删除
        $('#delMenus').click(function () {
            var checkStatus = table.checkStatus('menuDataList');
            var ids = [];
            $(checkStatus.data).each(function (i, o) {//o即为表格中一行的数据
                ids.push(o.id);
            });
            if (ids.length < 1) {
                layer.msg('无选中项');
                return false;
            }
            ids = ids.join(",");

            // 指删除操作
            //alert(ids);
            deleteMenuByIds(ids);

        });


        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>